<!-- 基本信息 -->
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { getTaskCollectDataApi, getDataCollectionApi } from '@/common/apis/train'
import * as echarts from 'echarts'
const chartRef = ref(null)
const props = defineProps({
  siml_times: {
    type: Array,
    default: () => [],
  },
  series: {
    type: Array,
    default: () => [],
  },
})

const fixedSeries = computed(() => {
  return props.series.map(item => ({
    ...item,
    type: 'line',
    smooth: false,
    symbol: 'none',
    lineStyle: { width: 1 }
  }))
})

const myChart = () => {
  if (!chartRef.value) return;
  const oldChart = echarts.getInstanceByDom(chartRef.value);
  if (oldChart) oldChart.dispose();
  const myChart = echarts.init(chartRef.value);

  const option = {
    backgroundColor: '#0d1a26', // 深色背景
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#0d1a26',
      borderColor: '#3e3e3e',
      textStyle: {
        color: '#fff',
      },
    },
    legend: {
      data: props.series.map((item: any) => item.name),
      textStyle: {
        color: '#fff',
      },
      right: 20,
      top: 10,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      name: '时间(秒)',
      nameGap: 12,
      nameTextStyle: {
        verticalAlign: 'top',
        lineHeight: 12,   // 调整x轴名字的位置,和x轴值对齐
      },
      boundaryGap: false,
      axisLine: { lineStyle: { color: '#ccc' } },
      axisLabel: {
        color: '#ccc'
      },
      data: props.siml_times,
    },
    yAxis: {
      type: 'value',
      name: '频率',
      nameTextStyle: {
        align: 'right', // 👈 让名称右对齐
        padding: [0, 10, 10, 0],  // 👉 重点，右边50px，把"频率"往左推
      },
      axisLine: { lineStyle: { color: '#ccc' } },
      axisLabel: { color: '#ccc' },
      splitLine: {
        lineStyle: {
          color: '#333',
        },
      },
      min: 0,            // 或者 'dataMin'
      max: 60,           // 或者 'dataMax'
    },
    series: fixedSeries.value
  }

  myChart.setOption(option)

  // 窗口缩放时自适应
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 暴露验证方法给父组件
defineExpose({
  validate: async () => {
    if (!ruleFormRef.value) return true
    return await ruleFormRef.value.validate()
      .then(() => true)
      .catch(() => false)
  },
})
onMounted(() => {
  myChart()
})

watch(
  () => [props.siml_times, props.series],
  (val) => {
    myChart()
  },
  { deep: true }
)
</script>

<template>
  <div class="wrapper">
    <div class="number-info">
      <span class="cpi-header-text">频率</span>
    </div>
    <div>
      <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: auto;
  // background: #000;
}

.radio-group {
  margin-bottom: 10px;
}

.radio-text {
  display: inline-block;
  margin-right: 10px;
}

.number-info {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 16px;
}
</style>
